<template>
  <el-dialog
    v-model="visible"
    :title="`${paramsProps.title}`"
    :destroy-on-close="true"
    width="580px"
    draggable
  >
    <el-form
      ref="ruleFormRef"
      label-width="140px"
      label-suffix=" :"
      :rules="rules"
      :model="paramsProps.row"
      @submit.enter.prevent="handleSubmit"
    >
      <el-form-item label="用户头像" prop="userAvatar">
        <SimplifyUpload dir="user" v-model="paramsProps.row.userAvatar"></SimplifyUpload>
      </el-form-item>
      <el-form-item label="游客头像" prop="touristAvatar">
        <SimplifyUpload dir="user" v-model="paramsProps.row.touristAvatar"></SimplifyUpload>
      </el-form-item>
      <el-form-item label="网站名称" prop="siteName">
        <el-input
          v-model="paramsProps.row.siteName"
          placeholder="请填写网站名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="网站地址" prop="siteAddress">
        <el-input
          v-model="paramsProps.row.siteAddress"
          placeholder="请填写网站地址"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="网站简介" prop="siteIntro">
        <el-input
          v-model="paramsProps.row.siteIntro"
          placeholder="请填写网站简介"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="网站公告" prop="siteNotice">
        <el-input
          v-model="paramsProps.row.siteNotice"
          placeholder="请填写网站公告"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="建站日期" prop="createSiteTime">
        <el-date-picker
              v-model="paramsProps.row.createSiteTime"
              type="date"
              placeholder="请填写建站日期"
              value-format="YYYY-MM-DD"
            />
      </el-form-item>
      <el-form-item label="备案号" prop="recordNumber">
        <el-input
          v-model="paramsProps.row.recordNumber"
          placeholder="请填写备案号"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="作者头像" prop="authorAvatar">
        <SimplifyUpload dir="user" v-model="paramsProps.row.authorAvatar"></SimplifyUpload>
      </el-form-item>
      <el-form-item label="网站作者" prop="siteAuthor">
        <el-input
          v-model="paramsProps.row.siteAuthor"
          placeholder="请填写网站作者"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="文章默认封面" prop="articleCover">
        <SimplifyUpload dir="user" v-model="paramsProps.row.articleCover"></SimplifyUpload>
      </el-form-item>
      <el-form-item label="关于我" prop="aboutMe">
        <el-input v-model="paramsProps.row.aboutMe"  type="textarea" placeholder="请填写关于我" clearable></el-input>
      </el-form-item>
      <el-form-item label="Github" prop="github">
        <el-input v-model="paramsProps.row.github" placeholder="请填写Github" clearable></el-input>
      </el-form-item>
      <el-form-item label="Gitee" prop="gitee">
        <el-input v-model="paramsProps.row.gitee" placeholder="请填写Gitee" clearable></el-input>
      </el-form-item>
      <el-form-item label="哔哩哔哩" prop="bilibili">
        <el-input
          v-model="paramsProps.row.bilibili"
          placeholder="请填写哔哩哔哩"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="QQ" prop="qq">
        <el-input v-model="paramsProps.row.qq" placeholder="请填写QQ" clearable></el-input>
      </el-form-item>
      <el-form-item label="是否评论审核 (0否 1是)" prop="commentCheck">
        <el-input-number
          v-model="paramsProps.row.commentCheck"
          :precision="0"
          :min="1"
          :max="999999"
        />
      </el-form-item>
      <el-form-item label="是否留言审核 (0否 1是)" prop="messageCheck">
        <el-input-number
          v-model="paramsProps.row.messageCheck"
          :precision="0"
          :min="1"
          :max="999999"
        />
      </el-form-item>
      <el-form-item label="是否开启打赏 (0否 1是)" prop="isReward">
        <el-input-number v-model="paramsProps.row.isReward" :precision="0" :min="1" :max="999999" />
      </el-form-item>
      <el-form-item label="微信二维码" prop="weiXinCode">
        <SimplifyUpload dir="user" v-model="paramsProps.row.weiXinCode"></SimplifyUpload>
      </el-form-item>
      <el-form-item label="支付宝二维码" prop="aliCode">
        <SimplifyUpload dir="user" v-model="paramsProps.row.aliCode"></SimplifyUpload>
      </el-form-item>
      <el-form-item label="是否邮箱通知 (0否 1是)" prop="emailNotice">
        <el-input-number
          v-model="paramsProps.row.emailNotice"
          :precision="0"
          :min="1"
          :max="999999"
        />
      </el-form-item>
      <el-form-item label="社交列表" prop="socialList">
        <el-input
          v-model="paramsProps.row.socialList"
          placeholder="请填写社交列表"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="登录方式" prop="loginList">
        <el-input
          v-model="paramsProps.row.loginList"
          placeholder="请填写登录方式"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="是否开启音乐播放器 (0否 1是)" prop="isMusic">
        <el-input-number v-model="paramsProps.row.isMusic" :precision="0" :min="1" :max="999999" />
      </el-form-item>
      <el-form-item label="网易云歌单id" prop="musicId">
        <el-input
          v-model="paramsProps.row.musicId"
          placeholder="请填写网易云歌单id"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="是否开启聊天室 (0否 1是)" prop="isChat">
        <el-input-number v-model="paramsProps.row.isChat" :precision="0" :min="1" :max="999999" />
      </el-form-item>
      <el-form-item label="websocket链接" prop="websocketUrl">
        <el-input
          v-model="paramsProps.row.websocketUrl"
          placeholder="请填写websocket链接"
          clearable
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false"> 取消</el-button>
      <el-button type="primary" @click="handleSubmit"> 确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import SimplifyUpload from '@/components/SimplifyUpload/index.vue'
import { ref, reactive } from 'vue'
import { type ElForm, ElMessage } from 'element-plus'

defineOptions({
  name: 'TSiteConfigForm'
})

const rules = reactive({
  userAvatar: [{ required: true, message: '请填写用户头像' }],
  touristAvatar: [{ required: true, message: '请填写游客头像' }],
  siteName: [{ required: true, message: '请填写网站名称' }],
  siteAddress: [{ required: true, message: '请填写网站地址' }],
  siteIntro: [{ required: true, message: '请填写网站简介' }],
  siteNotice: [{ required: true, message: '请填写网站公告' }],
  createSiteTime: [{ required: true, message: '请填写建站日期' }],
  recordNumber: [{ required: true, message: '请填写备案号' }],
  authorAvatar: [{ required: true, message: '请填写作者头像' }],
  siteAuthor: [{ required: true, message: '请填写网站作者' }],
  articleCover: [{ required: true, message: '请填写文章默认封面' }],
  commentCheck: [{ required: true, message: '请填写是否评论审核 (0否 1是)' }],
  messageCheck: [{ required: true, message: '请填写是否留言审核 (0否 1是)' }],
  isReward: [{ required: true, message: '请填写是否开启打赏 (0否 1是)' }],
  emailNotice: [{ required: true, message: '请填写是否邮箱通知 (0否 1是)' }],
  socialList: [{ required: true, message: '请填写社交列表' }],
  loginList: [{ required: true, message: '请填写登录方式' }],
  isMusic: [{ required: true, message: '请填写是否开启音乐播放器 (0否 1是)' }],
  isChat: [{ required: true, message: '请填写是否开启聊天室 (0否 1是)' }],
  createTime: [{ required: true, message: '请填写创建时间' }]
})

const visible = ref(false)
const paramsProps = ref<View.DefaultParams>({
  title: '',
  row: {},
  api: undefined,
  getTableList: undefined
})

// 接收父组件传过来的参数
const acceptParams = (params: View.DefaultParams) => {
  paramsProps.value = params
  visible.value = true
}

// 提交数据（新增/编辑）
const ruleFormRef = ref<InstanceType<typeof ElForm>>()
const handleSubmit = () => {
  ruleFormRef.value!.validate(async (valid) => {
    if (!valid) return
    try {
      await paramsProps.value.api!(paramsProps.value.row)
      ElMessage.success({ message: `${paramsProps.value.title}成功！` })
      paramsProps.value.getTableList!()
      visible.value = false
    } catch (error) {
      console.log(error)
    }
  })
}

defineExpose({
  acceptParams
})
</script>

<style scoped lang="scss"></style>
